<script setup>
import { CustomerService } from '@/service/CustomerService';
import { ProductService } from '@/service/ProductService';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { onBeforeMount, reactive, ref } from 'vue';
import TextHeader from './query/TextHeader.vue';

const customers1 = ref(null);
const customers2 = ref(null);
const customers3 = ref(null);
const filters1 = ref(null);
const loading1 = ref(null);
const products = ref(null);
const queryParams = reactive([{ key: 'name', value: undefined, popoverVisible: false }]);
const columns = [
    { name: 'name', label: '姓名', field: 'name', align: 'center', queryAble: true, queryType: 'text' },
    { name: 'country', label: '国籍', field: 'country', align: 'center', queryAble: true, queryType: 'text' }
];

onBeforeMount(() => {
    ProductService.getProductsWithOrdersSmall().then((data) => (products.value = data));
    CustomerService.getCustomersLarge().then((data) => {
        customers1.value = data;
        loading1.value = false;
        customers1.value.forEach((customer) => (customer.date = new Date(customer.date)));
    });
    CustomerService.getCustomersLarge().then((data) => (customers2.value = data));
    CustomerService.getCustomersMedium().then((data) => (customers3.value = data));

    initFilters1();
});

function initFilters1() {
    filters1.value = {
        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
        representative: { value: null, matchMode: FilterMatchMode.IN },
        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
    };
}

function canQuery(fieldName) {
    return queryParams.some((param) => param.key == fieldName);
}
</script>
<template>
    <div class="flex justify-between mt-2 mb-4">
        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
        <IconField>
            <InputIcon>
                <i class="pi pi-search" />
            </InputIcon>
            <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
        </IconField>
    </div>
    <DataTable :value="customers1" :paginator="true" :rows="10" dataKey="id" :rowHover="true" :loading="loading1">
        <template #empty> 您搜索的数据为空。 </template>
        <template #loading> 加载中，请稍等。 </template>
        <Column v-for="(column, index) in columns" :key="index" :field="column.field" style="min-width: 12rem">
            <!-- 标题 -->
            <template #header>
                <TextHeader :label="column.label" :field="column.field" :queryAble="column.queryAble" />
            </template>
            <template #body="{ data }">
                {{ data[column.field] }}
            </template>
        </Column>
    </DataTable>
</template>
